User Guide

Overview

Quire links articles into a hypertext document, such as a choice-based story, self-correcting quiz, personal wiki, or training manual. You write articles and connect them with links.

Articles

Quire content is organized into <article> elements, each with a unique id and a title attribute. To start the story at a specific article, put bookmark in the article tag.

<article id="SHIPWRECK" title="Sandy Shore" bookmark>
  ...
</article>

Links

Links use wiki-style syntax: [link text|ARTICLE_ID]. To keep the current scene and append the next, use keep:

<article id="TELLER" title="Inside the Bank">
  <p> She stares and [whispers|HELP, keep].</p>
</article>

Go-Back

The special GO-BACK destination returns to the previous article automatically: [Return|GO-BACK]. Several articles can link to a shared article, such as a glossary, user guide, or hints.

<article id="GLOSSARY" title="Parts of Speech">
  <p> Please [return|GO-BACK] to your quiz question.</p>
</article>

Focus

Use guillemets «item» to create clickable tokens that toggle visibility of associated paragraphs with class="focus". Focus has the effect of “examine” in interactive fiction.

<article id="BINDERY" title="Librarian’s Workroom">
  <p> The room smells like dust and regret. An oak table with a «wooden chest» is surrounded by «bookshelves».</p>
  <p class="focus"> Wooden chest: scarred with the marks of many years, its surface worn smooth by countless hands.</p>
  <p class="focus"> Bookshelves: packed with overside tomes, some so old their titles have faded.</p>
</article>

Random

Use the random class with pipe-separated options to display one randomly each time the article or paragraph is shown. Clicking on random text re-randomizes the choice.

<article id="STOP LIGHT" title="5th & Main" keep>
  <p class="random"> Red | Yellow | [Green|AIRPORT] </p>
</article>

Replace

The replace class cycles through alternatives separated by pipes.

<article id="NEST" title="Crow’s Nest">
  <p class="replace"> Default text | Click 1 | Click 2 </p>
</article>

Visited

Use the visited class to check whether a scene has been shown already and branche accordingly. The branches are in { } braces.

<article id="DOWNTOWN" title="Water Street">
  <p class="visited">PUB{Text if visited}{Text if not}</p>
</article>

Supports logical operators and, or, and not.

<article id="CAMP" title="Water Events">
  <p class="visited"> LAKE or POOL {You’re all wet.} {Still dry.} </p>
</article>

Take From

The take from class asks whether you visited where an object was mentioned. If you visited, you’re presumed to take the object from that scene.

<span class="take from" tooltip="Have key?"> LOBBY
  {I open the toolcase with the key from the lobby.}{No lobby, no key.}
</span>

The LOBBY scene mentions a key. Did you visit the LOBBY? If you did, you are presumed to take the key from the LOBBY.

Speech Balloons

Text in curly quotation marks on its own line will be shown in a speech balloon. Double “ ” for the left speaker. Single ‘ ’ for the right speaker.

<article id="GALLEY" title="Talking with the Cook">
    <p> “Hold it, mate. Whass'a password?” </p>
    <p> ‘What's a password?’ </p>
</article>

Editor Panel

Quire includes an integrated editor with syntax highlighting, snippets, search/replace, and a resizable panel.

File Operations

Load and save your story as HTML files. Use the menu options to open existing stories or export your current work.

Accessibility

Quire supports keyboard navigation, ARIA roles, and focus management for screen readers and keyboard users.

Snippets

Use the snippets menu to quickly insert common elements like articles, headings, paragraphs, links, random and replace blocks.

Advanced Authoring

Combine visited, replace, and random classes to create dynamic, branching narratives and interactive content.

<p class="visited replace"> KEY 
    {Open the door.|Look for another way.} 
    {Search for the key first.|Look for another way.}
</p>

Troubleshooting

• Ensure all HTML tags are properly closed.
• Use valid article IDs and titles.
• Remember to render after editing to update the view.
• Use the browser console for debugging randomization or link issues.

Further Resources

See the Snippets section for example templates and extended tutorials.

Version 0.4

Copyright © 2025 Roger A. Kenyon. Permission is granted to use, copy, modify, and distribute this software under the terms of the MIT License. Use at your own risk; no warranties provided.

Articles